<template>
  <!-- 头部导航栏 -->
  <view class="navbar" :style="{ paddingTop: menu.top + 'px' }">
    <image src="http://xcxtp.njmswl.com/images/goBack.png" class="goBack" @tap="goBack" />
    <text class="title">房源详情</text>
  </view>
  <!-- 图片/视频 -->
  <scroll-view class="scroll-view" scroll-y>
    <view class="houseImgWrapper">
       <image :src="secondHouseList?.images[0]" v-if="!toggleNumber" class="houseImg" />
      <video class="displayViedo" :src="secondHouseList?.video" v-else controls>
      </video>
      <view v-if="!isFavorite" class="starWrapper" @click="collect">
        <image src="http://xcxtp.njmswl.com/images/star.png" class="starImg" />
      </view>
      <view v-else class="starWrapper" @click="cancleCollect">
        <image
          src="http://xcxtp.njmswl.com/images/index/allreadyStar.png"
          class="allreadystarImg"
        />
      </view>
      <view class="choose">
        <view class="chooseImg" @click="toggle(0)" :class="{ selected: !toggleNumber }">图片</view>
        <view class="chooseVideo" @click="toggle(1)" :class="{ selected: toggleNumber }">视频</view>
      </view>
    </view>
    <!-- 房子信息 -->
    <view class="houseInfo">
      <view class="houseInfo-item1">
        <view class="item1-title"> {{ secondHouseList?.name }} </view>
        <button class="item1-share" open-type="share">
          <image src="http://xcxtp.njmswl.com/images/share.png" class="item1-img" />分享
        </button>
      </view>
      <p class="houseInfo-item2">
        <span class="houseLabel" v-for="(item, index) in labelArr" :key="index">{{ item }}</span>
      </p>
      <view class="buyPrice">
        <view class="buyPrice-item">
          <p>
            <span class="averagePrice">{{ secondHouseList?.totalPrice }}</span>
          </p>
          <p class="buyPrice-text">售价</p>
        </view>
        <view class="buyPrice-item">
          <p>
            <span class="totalPrice">{{ secondHouseList?.roomType }}</span>
          </p>
          <p class="buyPrice-text">房型</p>
        </view>
        <view class="buyPrice-item">
          <p>
            <span class="totalArea">{{ secondHouseList?.area }}</span>
          </p>
          <p class="buyPrice-text">建筑面积</p>
        </view>
      </view>
      <view class="houseInfo-item3">
        <view
          class="item3-content"
          v-for="(item, index) in houseInfo?.slice(0, houseInfo.length - 1)"
          :key="index"
        >
          <span class="item3-key">{{ Object.keys(item)[0] }}</span
          ><span class="item3-value">{{ Object.values(item)[0] }}</span>
        </view>
        <view class="item3-content">
          <span class="item3-key">小区地址</span>
          <span class="item3-value">江苏省南京市鼓楼区100号 </span>
          <a class="location" href="javascript:;">位置导航</a>
        </view>
      </view>
    </view>
    <!-- 周边位置 -->
    <view class="aroundLocation">
      <view class="aroundText">周边位置</view>
      <map
        style="width: 100%; height: 280rpx"
        :latitude="latitude"
        :longitude="longitude"
        :markers="covers"
      ></map>
    </view>
    <!-- 小区简介 -->
    <view class="introduce">
      <view class="aroundText">小区简介</view>
      <view class="introduceText"
        >小区是2014年交付的小区，都是高层，小区是景观房，可远观长江，
        小区是世贸物业管理，小区门口都是有保安24小时巡逻和看管， 小区管理严格。</view
      >
    </view>
    <!-- 猜你喜欢 -->
    <view class="guessLike" v-if="secondHouseList && secondHouseList.recommendHouse">
      <view class="aroundText">猜你喜欢</view>
      <view class="content" @click="goDetail(secondHouseList?.recommendHouse.id)">
        <view class="contentItem">
          <image
            :src="
              secondHouseList.recommendHouse.images && secondHouseList.recommendHouse.images.length
                ? secondHouseList.recommendHouse.images[0]
                : defaultImage
            "
            class="contentItemImg"
          />
          <view class="description">
            <p class="desTitle">{{ secondHouseList?.recommendHouse.name }}</p>
            <p>
              <span class="houseTag">{{ secondHouseList?.recommendHouse.area }}</span>
              <span class="houseTag">{{ secondHouseList?.recommendHouse.roomType }}</span>
              <span class="houseTag">{{ secondHouseList?.recommendHouse.asaga }}</span>
            </p>
            <p>
              <span class="allPrice">{{ secondHouseList?.recommendHouse.totalPrice + '万' }}</span>
              <span class="recoomendArea">{{
                secondHouseList?.recommendHouse.price + '元/㎡'
              }}</span>
            </p>
            <p>
              <span
                class="houseLabel"
                v-for="(item, index) in secondHouseList?.recommendHouse.tags"
                :key="index"
                >{{ item }}</span
              >
            </p>
          </view>
        </view>
      </view>
    </view>
    <open-program></open-program>
    <view class="shopOwner">
      <image src="http://xcxtp.njmswl.com/images/index/shopOwner.png" class="shopOwnerImg" />
      <view>
        <p class="shopText1">袁经理</p>
        <p class="shopText2">门店店长</p>
      </view>
      <view class="wechat" @click="addWC">加微信</view>
      <view class="tel" @click="callPhone('15950585715')">打电话</view>
    </view>
  </scroll-view>
</template>
<script setup>
import openProgram from '../components/openProgram.vue'
import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { ref } from 'vue'
import dayjs from 'dayjs'
import { getSecondHandAPI } from '@/services/secondHand'
import { createCollectAPI, deleteCollectAPI } from '@/services/myCollectHouse'
const menu = ref({})
const detailId = ref()
onLoad(async (options) => {
  detailId.value = options.id
  menu.value = uni.getMenuButtonBoundingClientRect()
  await getSecondHouseList()
})
//uniapp微信小程序分享页面到微信好友
onShareAppMessage(() => {})
//uniapp微信小程序分享页面到微信朋友圈
const goDetail = (id) => {
  uni.navigateTo({
    url: `/pages/simplePage/secondHandDetail?id=${id}`, // 假设detail页面需要id参数
  })
}
onShareTimeline(() => {})
const isFavorite = ref() //用户是否收藏房源
const userId = ref()
userId.value = JSON.parse(uni.getStorageSync('appIdKey'))
const collect = async () => {
  const res = await createCollectAPI({
    id: userId.value,
    houseId: secondHouseList.value.id,
    type: 1,
  })
  if (res.code == 0) {
    isFavorite.value = true
    uni.showToast({
      title: '收藏成功',
      icon: 'success',
    })
  }
}
//用户取消收藏
const cancleCollect = async () => {
  uni.showModal({
    content: '确认取消收藏？',
    success: async (res) => {
      if (res.confirm) {
        const res = await deleteCollectAPI({
          houseId: secondHouseList.value.id,
          type: 1,
        })
        if (res.code == 0) {
          isFavorite.value = false
        }
      }
    },
  })
}

// 请求二手房详情数据
const secondHouseList = ref()
const houseInfo = ref()
const getSecondHouseList = async () => {
  const res = await getSecondHandAPI({ id: detailId.value })
  secondHouseList.value = res.data
  console.log('二手房详情页的信息', res.data)
  isFavorite.value = res.data.isFavorite
  houseInfo.value = [
    {
      房屋单价: secondHouseList.value.price,
    },
    {
      建筑类型: secondHouseList.value.buildingType,
    },
    {
      房屋朝向: secondHouseList.value.asaga,
    },
    {
      楼层高度: secondHouseList.value.floorHeight,
    },
    {
      房屋装修: secondHouseList.value.homeRenovation,
    },

    {
      建筑结构: secondHouseList.value.structure,
    },
    {
      房屋年代: secondHouseList.value.constructionYear,
    },

    {
      梯户比例: secondHouseList.value.liftProportion,
    },
    {
      户型结构: secondHouseList.value.houseStructure,
    },

    {
      税费情况: secondHouseList.value.taxes,
    },
    {
      配备电梯: secondHouseList.value.elevator,
    },
    {
      抵押信息: secondHouseList.value.mortgageInfo,
    },
    {
      小区地址: secondHouseList.value.communityAddress,
    },
  ]
}
// 地图位置
const covers = ref([
  {
    latitude: 39.909,
    longitude: 116.39742,
    iconPath: 'http://xcxtp.njmswl.com/images/location.png',
    width: 18,
    height: 20,
  },
  {
    latitude: 32.061973,
    longitude: 118.745211,
    iconPath: 'http://xcxtp.njmswl.com/images/location.png',
    width: 18,
    height: 20,
  },
])
let id = 0
let latitude = 32.061973
let longitude = 118.745211

onShareAppMessage(() => {
  console.log('调用了我')
})

//uniapp微信小程序分享页面到微信朋友圈

onShareTimeline(() => {})
// 分享当前页面按钮
// const shareCurrentPage = ()=>{
//   onShareAppMessage(() => {
//     return {
//       title:"标题",
//       path:'/pages/index/index'
//     }
// });
// }
const goBack = () => {
  uni.navigateBack()
}

// 添加店长微信
const addWC = () => {
  uni.showModal({
    title: '添加指南',
    content:
      '微信号：15950585715',
    showCancel: false,
    confirmText: '复制号码',
    success: () => {
      uni.setClipboardData({
        data:'15950585715',
      })
    },
  })
}
// 打电话联系店长
const callPhone = (phoneNumber) => {
  uni.makePhoneCall({
    phoneNumber: phoneNumber, // 电话号码
    success: function () {
      console.log('拨打电话成功')
    },
    fail: function () {
      console.log('拨打电话失败')
    },
  })
}
//-----token过期---------------------------------------------------------------------
const time = ref()
function myFunction() {
  time.value = uni.getStorageSync('expiresTime')||0
  // 获取当前系统时间的时间戳
  const currentTimeTimestamp = Date.now()

  // 检查Token是否过期
  if (time.value === 0) {
  } else if (currentTimeTimestamp >= time.value) {
    uni.showToast({
      title: '登录过期，请重新登录！',
      icon: 'none',
      duration: 2000,
      mask: true,
      success: function () {
        // 清理存储
        uni.removeStorageSync('accessToken')
        uni.removeStorageSync('appIdKey')
        uni.removeStorageSync('expiresTime')

        // 使用 setTimeout 来延迟跳转
        setTimeout(function () {
          uni.switchTab({
            url: '/pages/index/index',
          });
        }, 2000); // 等待2000毫秒（与 duration 相同）
      },
    })
  } else {
  }
}
const intervalId = setInterval(myFunction, 1000)

//----------------------------------视频照片切换--------------------------------------------
const toggleNumber = ref(0) //默认显示照骗
const toggle = (number) => {
  console.log('数字展示==》》》', number)
  if (number === 0) {
    toggleNumber.value = 0
  }
  if (number === 1) {
    toggleNumber.value = 1
  }
}
//------------------------------------------------------------------------------------------
</script>
<style lang="less">
.displayViedo{
  width: 750rpx;
  height: 100%;
}
.recoomendArea {
  color: #989b9e;
  font-size: 22rpx;
  font-family: 'PingFangSC-Regular';
  line-height: 36rpx;
}
page {
  height: 100%;
  background-color: #f4f5fc;
  display: flex;
  flex-direction: column;
}
.scroll-view {
  flex: 1;
}
.navbar {
  margin-top: 8rpx;
  padding-bottom: 49rpx;
  background-color: #fff;
  background-size: cover;
  position: relative;
  display: flex;
  flex-direction: column;

  .goBack {
    position: absolute;
    width: 18rpx;
    height: 30rpx;
    margin-left: 56rpx;
    margin-top: 9rpx;
  }

  .title {
    text-align: center;
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 36rpx;
    color: #000000;
  }
}

.houseImgWrapper {
  position: relative;
  display: flex;
  justify-content: center;
  width: 750rpx;
  height: 500rpx;

  .houseImg {
    height: 100%;
    width: 100%;
  }

  .starWrapper {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 30rpx;
    top: 25rpx;
    width: 80rpx;
    height: 80rpx;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;

    /* opacity: 0.6; */
    .starImg {
      width: 35rpx;
      height: 35rpx;
    }
    .allreadystarImg {
      width: 70rpx;
      height: 70rpx;
    }
  }
}

.choose {
  position: absolute;
  bottom: 25rpx;
  width: 200rpx;
  height: 45rpx;

 .chooseImg {
      float: left;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100rpx;
      height: 45rpx;
      border-radius: 23rpx 0rpx 0rpx 23rpx;
      background-color: #000;
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 20rpx;
      color: #fefefe;
    }
    .chooseVideo.selected,
    .chooseImg.selected {
      background-color: #16c686;
      opacity: 1;
    }
    .chooseVideo {
      float: right;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100rpx;
      height: 45rpx;
      border-radius: 0rpx 23rpx 23rpx 0rpx;
      background-color: #000;
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 20rpx;
      color: #fefefe;
    }
}

.houseInfo {
  width: 750rpx;
  height: 755rpx;
  padding-top: 35rpx;
  padding-left: 28rpx;
  margin-bottom: 29rpx;
  background: #ffffff;

  .houseInfo-item1 {
    display: flex;
    justify-content: space-between;
    padding-right: 28rpx;
    .item1-share {
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 500;
      font-size: 24rpx;
      color: #000000;
      width: 150rpx;
      height: 55rpx;
      margin: 0rpx;
      background: #f3f4fa;
      border-radius: 28rpx;

      .item1-img {
        width: 28rpx;
        height: 28rpx;
        margin-right: 7rpx;
      }
    }

    .item1-title {
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 36rpx;
      color: #000000;
    }
  }
}

.houseInfo-item2 {
  margin-top: 14rpx;
}

.houseLabel {
  width: auto;
  height: 31rpx;
  background: #f3f4fa;
  border-radius: 3rpx;
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 20rpx;
  color: #687a8c;
  padding: 6rpx 11rpx;
  margin-right: 9rpx;
}

.buyPrice {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 50rpx;

  .buyPrice-item {
    width: 33%;
  }
}

/* 平均价格 */
.averagePrice {
  font-family: PingFang SC;
  font-weight: 600;
  font-size: 34rpx;
  color: #e75841;
}

/* 参考总价 */
.totalPrice,
.totalArea {
  font-family: PingFang SC;
  font-weight: 600;
  font-size: 34rpx;
  color: #000000;
}

.buyPrice-text,
.item3-key {
  font-family: PingFang SC;
  margin-top: 4rpx;
  font-weight: 400;
  font-size: 24rpx;
  color: #687a8c;
}

.houseInfo-item3 {
  display: flex;
  flex-wrap: wrap;
  /* justify-content: center; */
  width: 100%;
  margin-top: 40rpx;

  .item3-content {
    width: 50%;
    margin-top: 20rpx;

    .item3-key {
      display: inline-block;
      width: 96rpx;
      margin-right: 45rpx;
    }

    .item3-value {
      width: auto;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #000000;
    }

    .location {
      display: inline-block;
      text-decoration: underline;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      margin-left: 20rpx;
      color: #16c686;
    }
  }
}

.item3-content:last-child {
  width: 100%;
}

.aroundLocation {
  width: 750rpx;
  height: 429rpx;
  padding: 40rpx 28rpx 45rpx;
  margin-bottom: 22rpx;
  background: #ffffff;

  .map {
    width: 695rpx;
    height: 280rpx;
  }
}

.guessLike {
  width: 100%;
  padding: 40rpx 28rpx 5rpx;
  background-color: #fff;
  margin-top: 21rpx;

  .content {
    display: flex;
    width: 750rpx;
    height: auto;
    background-color: #fff;
  }

  .contentItem {
    flex: 1;
    display: flex;
    align-items: center;
    width: 100%;
    height: 230rpx;
    margin-right: 27rpx;
    border-bottom: 1rpx solid #eeeeee;
  }

  .content:last-child .contentItem {
    border-bottom: none;
  }

  .contentItemImg {
    width: 210rpx;
    height: 155rpx;
    background: #000000;
    border-radius: 5rpx;
    margin-right: 21rpx;
  }

  .desTitle {
    width: 410rpx;
    font-family: PingFang SC;
    font-weight: 550;
    font-size: 30rpx;
    color: #000000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .allPrice {
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 30rpx;
    color: #e75841;
    margin-right: 14rpx;
  }

  .avgPrice {
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 22rpx;
    color: #989b9e;
  }

  .houseTag {
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 20rpx;
    color: #020609;
    margin-right: 20rpx;
  }
}

.shopOwner {
  position: fixed;
  bottom: 0rpx;
  display: flex;
  align-items: center;
  width: 694rpx;
  height: 110rpx;
  padding-right: 26rpx;
  margin-left: 27rpx;
  background: rgba(0, 0, 0, 0.75);
  border-radius: 15rpx;

  .shopOwnerImg {
    width: 65rpx;
    height: 65rpx;
    margin-left: 28rpx;
    margin-right: 22rpx;
  }

  .shopText1 {
    width: 120rpx;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    color: #ffffff;
  }

  .shopText2 {
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 22rpx;
    color: #b5b5b5;
  }

  .wechat {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 134rpx;
    height: 50rpx;
    margin-left: 210rpx;
    margin-right: 16rpx;
    background: #3bc48b;
    border-radius: 25rpx;

    font-family: PingFang SC;
    font-weight: 500;
    font-size: 24rpx;
    color: #ffffff;
  }

  .tel {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 134rpx;
    height: 50rpx;
    background: #3072f5;
    border-radius: 25rpx;

    font-family: PingFang SC;
    font-weight: 500;
    font-size: 24rpx;
    color: #ffffff;
  }
}

.aroundText {
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 36rpx;
  margin-bottom: 20rpx;
  color: #000000;
}

.introduce {
  width: 750rpx;
  height: auto;
  background: #ffffff;
  padding: 40rpx 28rpx;

  .introduceText {
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    color: #687a8c;
    line-height: 40rpx;
  }
}
</style>
